<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>
</body>
    <script>
        // 我们的数据对象
        var data = { a: 1 }

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            data: data
        })
        
        // 获得这个实例上的 property
        // 返回源数据中对应的字段
        vm.a == data.a // => true

        // ……反之亦然
        data.a = 3
        vm.a // => 3


        var obj = {
            foo: 'bar'
        }

        Object.freeze(obj)

        new Vue({
            el: '#app',
            data: obj
        })

        var data = { a: 1 }
        var vm = new Vue({
            el: '#example',
            data: data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
        })

        // 实例生命周期钩子
        new Vue({
            data: {
                a: 1
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a)
            }
        })
    </script>
</html>